<template>
  <div class="playpa">
    <canvas ref="canvas" width="60" height="60"></canvas>
    <span v-if="!playing" @click.stop="$emit('audio-play-handler')">
      <i class="fonticon iconfont icon-24gf-play"></i>
    </span>
    <span v-else @click.stop="$emit('audio-pause-handler')"
      ><i class="fonticon iconfont icon-bofangzanting"></i
    ></span>
  </div>
</template>

<script>
export default {
  props: {
    currentSong: Object,
    playing: Boolean,
    duration: Number,
    currentTime: Number,
  },
  computed: {
    percentedProgress: function () {
      return this.duration === 0 ? 0 : this.currentTime / this.duration;
    },
  },
  watch: {
    percentedProgress: function (n) {
      const context = this.$refs.canvas.getContext("2d");
      context.clearRect(0, 0, 60, 60);
      context.lineWidth = 2;

      context.beginPath();
      context.arc(30, 30, 28, -90, (Math.PI / 180) * 360 * n - 90);
      context.strokeStyle = "rgba(0,0,0,0.7)";
      context.lineWidth = 3;
      context.stroke();
      context.beginPath();
      context.arc(
        30,
        30,
        28,
        (Math.PI / 180) * 360 * n - 90,
        (Math.PI / 180) * 270
      );
      context.strokeStyle = "rgba(0,0,0,0.3)";
      context.lineWidth = 2;
      context.stroke();
    },
  },
};
</script>

<style lang="less" scoped>
.playpa {
  margin: 0 20px;
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: rotateZ(20deg);
  }
  .fonticon {
    font-size: 20px;
  }
}
</style>